<template>
  <div>
    <storeDiyForm :title="diyItem.name"  :hide="['other']">
      <template #content>
        <storeDiyFormItem label="模板样式">
          <storeDiyFormTempBtn
            text="选择模板"
            type="title"
            v-model="diyItem.temp"
          >
          </storeDiyFormTempBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="文本名称">
          <el-input v-model="diyItem.title" />
        </storeDiyFormItem>
        <storeDiyFormItem label="跳转链接">
          <storeDiyFormLinkBtn text="选择跳转到的页面" v-model="diyItem.link">
          </storeDiyFormLinkBtn>
        </storeDiyFormItem>
        <template v-if="diyItem.temp?.value == 5">
          <storeDiyFormItem label="副标状态">
            <storeDiyFormSelectBtn
              v-model="diyItem.style.move_status"
              :data="moveStatusData"
            ></storeDiyFormSelectBtn>
          </storeDiyFormItem>
          <storeDiyFormItem
            label="副标文本"
            v-if="diyItem.style.move_status == 1"
          >
            <el-input v-model="diyItem.style.move_text" />
          </storeDiyFormItem>
        </template>
      </template>

      <template #style>
        <template v-if="diyItem.style">
          <el-divider content-position="left">
            <div class="fw">文字显示样式</div>
          </el-divider>
          <storeDiyFormItem label="文字加粗">
            <storeDiyFormSelectBtn
              v-model="diyItem.style.fw"
              :data="fwData"
            ></storeDiyFormSelectBtn>
          </storeDiyFormItem>
          <storeDiyFormItem label="文字大小">
            <storeDiyFormSelectBtn
              v-model="diyItem.style.fz"
              :data="fzData"
            ></storeDiyFormSelectBtn>
          </storeDiyFormItem>
          <storeDiyFormItem label="文本颜色">
            <storeDiyFormColorBtn v-model="diyItem.style.color" />
          </storeDiyFormItem>

          <template v-if="diyItem.temp?.value == 5">
            <storeDiyFormItem
              label="副标颜色"
              v-if="diyItem.style.move_status == 1"
            >
              <storeDiyFormColorBtn v-model="diyItem.style.move_color" />
            </storeDiyFormItem>
            <storeDiyFormItem
              label="副标背景"
              v-if="diyItem.style.move_status == 1"
            >
              <storeDiyFormColorBtn v-model="diyItem.style.move_bg" />
            </storeDiyFormItem>
          </template>

          <el-divider content-position="left">
            <div class="fw">其他设置</div>
          </el-divider>
          <storeDiyFormItem label="背景状态">
            <storeDiyFormSelectBtn
              v-model="diyItem.style.bg_status"
              :data="bgStatusData"
            ></storeDiyFormSelectBtn>
          </storeDiyFormItem>
          <storeDiyFormItem
            label="背景颜色"
            v-if="diyItem.style.bg_status == 1"
          >
            <storeDiyFormColorBtn v-model="diyItem.style.bg" />
          </storeDiyFormItem>
          <storeDiyFormItem label="投影样式">
            <storeDiyFormSelectBtn
              v-model="diyItem.style.shade"
              :data="shadeData"
            ></storeDiyFormSelectBtn>
          </storeDiyFormItem>

          <storeDiyFormItem
            label="背景上圆角"
            v-if="diyItem.style.bg_status == 1"
          >
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.t_radius }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.t_radius"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
          <storeDiyFormItem
            label="背景下圆角"
            v-if="diyItem.style.bg_status == 1"
          >
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.b_radius }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.b_radius"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>

          <el-divider content-position="left">
            <div class="fw">边距</div>
          </el-divider>

          <storeDiyFormItem label="外左边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.ml }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.ml"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>

          <storeDiyFormItem label="外右边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.mr }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.mr"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
          <storeDiyFormItem label="外上边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.mt }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.mt"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
          <storeDiyFormItem label="外下边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.mb }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.mb"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>

          <storeDiyFormItem label="内左边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.pl }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.pl"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
          <storeDiyFormItem label="内右边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.pr }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.pr"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>

          <storeDiyFormItem label="内上边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.pt }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.pt"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
          <storeDiyFormItem label="内下边距">
            <div class="editor-input-block">
              <div class="editor-input-desc">
                {{ diyItem.style.pb }}px(像素)
              </div>
              <el-slider
                v-model="diyItem.style.pb"
                size="small"
                :min="0"
                :max="60"
              />
            </div>
          </storeDiyFormItem>
        </template>
      </template>
    </storeDiyForm>
  </div>
</template>
        
<script lang="ts">
export default {
  name: "storeDiyEditorTitle",
};
</script>
<script  lang="ts" setup >
import { ref } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormImageBtn from "../form/image-btn.vue";
import storeDiyFormLinkBtn from "../form/link-btn.vue";
import storeDiyFormTempBtn from "../form/temp-btn.vue";
import storeDiyFormColorBtn from "../form/color-btn.vue";

import { ElInput, ElDivider, ElColorPicker } from "element-plus";
import { diySelectDataType, diyTitleDatType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyTitleDatType;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          fw: 0,
          fz: "12px",
          color: "#000000",
          move_status: 0,
          move_bg: "#FFFFFF",
          move_color: "#000000",
          move_text: "",
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
      };
    },
  }
);

const fzData = ref<Array<diySelectDataType>>([
  {
    title: "小",
    value: "12",
  },
  {
    title: "中",
    value: "14",
  },
  {
    title: "大",
    value: "16",
  },
]);

const moveStatusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "隐藏",
    value: 0,
  },
]);

const bgStatusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);

const shadeData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "投影",
    value: 1,
  },
]);
const fwData = ref<Array<diySelectDataType>>([
  {
    title: "不加粗",
    value: 0,
  },
  {
    title: "加粗",
    value: 1,
  },
]);
</script>